<html>

<head>

    <title>登录页面</title>
    <meta charset="utf-8" />
    <style>
        body {

            font-family: Arial, sans-serif;

            background-color: #f1f1f1;

        }



        .container {

            max-width: 400px;

            margin: 0 auto;

            padding: 20px;

            background-color: #fff;

            border-radius: 5px;

            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

            /* margin-top: 100px; */
            /* background: url(../img/bg.png) no-repeat;; */

        }

        .wrap {
            background: url(../img/bg.png) no-repeat;
            height: 100%;
            background-size: cover;
            width: 100%;
        }



        h2 {

            text-align: center;

            color: #333;

        }



        .form-group {

            margin-bottom: 20px;

        }



        label {

            display: block;

            font-weight: bold;

            margin-bottom: 5px;

        }



        input[type="text"],

        input[type="password"] {

            width: 100%;

            padding: 10px;

            border: 1px solid #ccc;

            border-radius: 3px;

        }



        input[type="submit"] {

            width: 100%;

            background-color: #4CAF50;

            color: #fff;

            padding: 10px;

            border: none;

            border-radius: 3px;

            cursor: pointer;

        }



        input[type="submit"]:hover {

            background-color: #45a049;

        }
    </style>

    <script src="libs/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
    <!-- <link rel="stylesheet" type="text/css" href="css/index.css"> -->
    <script>
        $(function () {
            // ($('#username').text()), $("#password").text()
            const HOST = window.location.origin;

            function logon() {
                username = $('#username').val();
                password = $('#password').val();
                console.log(username);
                console.log(password);
                console.log('over');
                let url = HOST + '/api/carTable?userName=' + username + '&passwd=' + password;
                $.get(url, 'json', function (res) {
                    let result = JSON.parse(res);
                    // console.log(result.data)
                    // alert(result.data);
                    let resultMsg =  result.data.replace(' ', '');
                    // let result = JSON.parse(res);
                    if (resultMsg != 'success') {
                        alert("用户名或密码错误，请重新输入。");
                        // window.open( window.location.origin + '/logon.html');
                        $(location).attr('href', 'logon.html');
                    } else {
                        alert('输入正确');
                        $(location).attr('href', 'index.html');
                        // window.open( window.location.origin + '/index.html');
                        // window.location.href = window.location.origin + '/index.html'
                    }

                })
            }
            $('#target').submit(logon);
        })
    </script>
</head>

<body>
    <div class="wrap">

        <div class="container">

            <h2>登录</h2>

            <form action='#' method="get" id="target">

                <div class="form-group">

                    <label for="username">用户名:</label>

                    <input type="text" id="username" name="username" required>

                </div>

                <div class="form-group">

                    <label for="password">密码:</label>

                    <input type="password" id="password" name="password" required>

                </div>

                <input type="submit" value="登录">

            </form>

        </div>

    </div>
</body>

</html>